<template>
    <div class="myinfo h-[calc(100vh-1.33rem)] to-white">
        <div class="title">
            <div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
            <div class="detail">教员详情</div>
        </div>

        <div class="list">
            <div class="avartar" @click="changeAvatar">
                <div class="avartar-info">
                    <img :src="avatar" alt="">
                </div>
            </div>
            <div class="list-content">
                <span>姓名：</span>
                <van-field v-model="name" :placeholder="name" :rules="[{ message: '请输入正确内容' }]" />
            </div>
            <div class="list-content">
                <span>性别：</span>
                <van-field v-model="sex" :placeholder="sex" :rules="[{ message: '请输入正确内容' }]" />
            </div>
            <div class="list-content">
                <span>就读院校：</span>
                <van-field v-model="colleage" :placeholder="colleage" :rules="[{ message: '请输入正确内容' }]" />
            </div>

            <div class="list-content">
                <span>所学专业：</span>
                <van-field v-model="specialized" :placeholder="specialized" :rules="[{ message: '请输入正确内容' }]" />
            </div>

            <div class="list-content">
                <span>所在地址：</span>
                <van-field v-model="address" :placeholder="address" :rules="[{ message: '请输入正确内容' }]" />
            </div>

            <div class="list-content">
                <span>教授科目：</span>
                <van-field v-model="subject" :placeholder="subject" :rules="[{ message: '请输入正确内容' }]" />
            </div>

            <div class="list-content">
                <span>空闲时间：</span>
                <van-field v-model="freeTime" :placeholder="freeTime" :rules="[{ message: '请输入正确内容' }]" />
            </div>

            <div class="list-content">
                <span>期望薪资：</span>
                <van-field v-model="expectedWages" :placeholder="expectedWages" :rules="[{ message: '请输入正确内容' }]" />
            </div>

            <div class="list-content">
                <span>个人证书：</span>
                <van-field v-model="certificate" :placeholder="certificate" :rules="[{ message: '请输入正确内容' }]" />
            </div>

            <van-button round block type="primary" native-type="submit" @click="debouncedCommitInfo">
                保存
            </van-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/userStore'
import axios from '@/api/index'
import router from '@/router'
import { useDebounce } from '@/hooks/useDebounce'

const userStore = useUserStore()

const id = JSON.parse(localStorage.getItem('userInfo')).id

let name = ref('')
let sex = ref('')
let colleage = ref('')
let specialized = ref('')
let address = ref('')
let subject = ref('')
let freeTime = ref('')
let expectedWages = ref('')
let certificate = ref('')
let avatar = ref('')

onMounted(() => {
    axios.get('/page/myInfo', {
        params: { id }
    }).then(res => {
        const data = res.data.data[0];
        name.value = data.username;
        sex.value = data.sex;
        colleage.value = data.colleage;
        specialized.value = data.specialized;
        address.value = data.address;
        subject.value = data.subject;
        freeTime.value = data.freeTime;
        expectedWages.value = data.expectedWages;
        certificate.value = data.certificate;
        avatar.value = data.avatar;
    }).catch(error => {
        console.error('Error fetching info:', error);
    });
});

const commitInfo = () => {
    console.log('用户保存数据11111111111111');
    console.log(name.value);
    axios.post('/page/saveInfo', {
        id,
        username: name.value,
        sex: sex.value,
        colleage: colleage.value,
        specialized: specialized.value,
        address: address.value,
        subject: subject.value,
        freeTime: freeTime.value,
        expectedWages: expectedWages.value,
        certificate: certificate.value
    }).catch(error => {
        console.error('Error saving info:', error);
    });
}

const debouncedCommitInfo = useDebounce(commitInfo);

const goBack = () => {
    router.push('/page')
}
const changeAvatar = () => {
    console.log('别想换头像了！');
}
</script>

<style lang="less" scoped>
.myinfo {
    width: 100vw;
    overflow: hidden auto;

    .avartar {
        width: 2rem;
        height: 2rem;

        .avartar-info {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;

            img {
                max-width: 100%;
                max-height: 100%;
            }
        }
    }

    .title {
        height: 1.3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        position: sticky;
        top: 0;
        z-index: 1;
        box-shadow: inset 0 0 0.4rem 0 rgba(6, 0, 0, 0.1);

        .back {
            position: absolute;
            left: 0.7rem;
            box-sizing: border-box;
            padding: 0 0.1rem;
            width: 1rem;

            .icon-fanhui {
                font-size: 0.6rem;
            }
        }

        .detail {
            font-size: 0.64rem;
        }
    }

    .list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .list-content {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid rgba(6, 0, 0, 0.1);
            border-radius: 0.267rem;

            span {
                width: 3rem;
                font-size: 0.4rem;
            }
        }

        :deep(.van-cell.van-field) {
            margin: 0.2rem auto;
            border-radius: 30px;
            height: 1rem;
        }

        :deep(.van-button.van-button--primary.van-button--normal.van-button--block.van-button--round) {
            background-color: white;
            width: 80%;
            margin-top: 0.4rem;
            color: black;
            border: 0;
            font-size: 0.45rem;
            border: 2px solid rgba(6, 0, 0, 0.1);
        }
    }
}
</style>